<template>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">名片管理系统</a>
        <div @click.stop="showMenu" class="navbar-menu-h5"><i class="icon glyphicon glyphicon-list"></i></div>
        <div @click="showMenuWithAnimation" class="navbar-menu-pc"><i class="icon glyphicon glyphicon-list"></i></div>
    </div>
    <navTree :user-name="userName"></navTree>
    <div v-show="isopen" class="collapse navbar-collapse">
      <menuTree :class="{menuHide:!isopenPC,menuShow:isopenPC}"></menuTree>
    </div>
</nav>
</template>

<script type="text/javascript">
import menuTree from './menuTree'
import navTree from './navTree'
import {commonVue} from '../assets/js/base';

var selectNavibar;
export default {
  data () {
    return {
      isopen:false,//这个主要控制在手机端菜单显示隐藏的效果
      isopenPC:true,//这个主要是显示隐藏菜单的动画效果
      userName:'',
      userID:''
    }
  },
  methods:{
    showMenu:function(){
      commonVue.$emit('navSelected',this);
      this.isopen = !this.isopen;
    },
    showMenuWithAnimation:function(){
      this.isopenPC = !this.isopenPC;
      this.$parent.fullScreen = !this.$parent.fullScreen;
      commonVue.$emit("menuChange",this.$parent.fullScreen);
    },
    getEnglishName(number){
      if(number == 0){
        return "zero";
      }
      if(number == 1){
        return "one";
      }
      if(number == 2){
        return "two";
      }
      if(number == 3){
        return "three";
      }
      if(number == 4){
        return "four";
      }
      if(number == 5){
        return "five";
      }
    }
  },
  components: { menuTree,navTree },
  created:function(){
    selectNavibar = this;
    commonVue.$on('navSelected',function(navibar){
      if(!!!navibar){
        !!selectNavibar && (selectNavibar.isopen = false);
        selectNavibar = this;
        return;
      }
      if(selectNavibar != navibar){
        !!selectNavibar && (selectNavibar.isopen = false);
        selectNavibar = navibar;
      }
    });
  },
  mounted:function(){
    //如果在手机上 设置菜单默认隐藏
    // if(document.body.clientWidth < 750){
    //   window.setTimeout(() => {
    //     this.isopen = false;
    //   },300);
    // }

  }
}



</script>
